/**
 * 该页面骨架屏
 * @author 明浩
 */
import { View } from "@tarojs/components";
import Skeleton from "@/components/skeleton";

function SkeletonLoading() {
  const Item = () => (
    <View className="mt-[40rpx]">
      <View className="flex flex-row">
        <Skeleton
          width="200"
          height="200"
          className="rounded-[20rpx] mr-[20rpx]"
        />
        <View className="flex-1">
          <Skeleton
            width="100%"
            height="40"
            className="rounded-[20rpx] mt-[20rpx]"
          />
          <Skeleton
            width="100%"
            height="40"
            className="rounded-[20rpx] mt-[10rpx]"
          />
        </View>
      </View>
    </View>
  );
  return (
    <View className="p-[30rpx]">
      <View className="first:mt-0">
        <Skeleton height="368" className="rounded-[20rpx]" />
        <View className="flex-row items-center mt-[20rpx]">
          <View className="flex-1">
            <Skeleton
              width="100%"
              height="40"
              className="rounded-[20rpx] mt-[20rpx]"
            />
            <Skeleton
              width="100%"
              height="40"
              className="rounded-[20rpx] mt-[10rpx]"
            />
          </View>
        </View>
      </View>
      <Item />
      <Item />
      <Item />
      <Item />
      <Item />
    </View>
  );
}

export default SkeletonLoading;
